<!-- 每个item公共业务组件 -->
<template>
  <view
    class="item-wrap d-flex flex-column align-items-center justify-content-around"
    :style="{ backgroundColor: bgColor, backgroundImage: bgImg }"
  >
    <text class="item-title">{{ title }}</text>
    <span class="match-btn" :style="{ background: btnColor }">去匹配</span>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '显示标题',
  },
  bgColor: String,
  bgImg: String,
  btnColor: String,
})
</script>

<style>
.item-wrap {
  box-sizing: border-box;
  height: 108px;
  padding: 11px 12px;
  /* background-color: #fff8eb; */
  /* background-image: url(static/images/home/bg1.png); */
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 12px;
  .item-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #000000;
  }
  .icon-right {
    width: 16px;
    height: 16px;
  }
  .match-btn {
    display: inline-block;
    width: 66px;
    height: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #ffffff;
    text-align: center;
    background: #165dff;
    border-radius: 29px;
  }
}
</style>
